<template>
	<view class="articlelist">
		<view class="item" v-for="(item,index) in dataList" :key="index" @tap="clickLink(item.url)">
				<view class="title ellipsis">{{item.title}}</view>
				<view class="content">
					<view class="hd">
						<image src="/static/icon/rq.png"></image><text>{{util.format_date(item.create_time)}}</text>
					
					</view>
					<view class="bd">
						<rich-text :nodes="item.description.substr(0,70)+ '...'"></rich-text>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "articleList",
		props: {
			dataList: Array
		},
		data() {
			return {}
		},
		methods:{
			clickLink(e){
				uni.navigateTo({
					url: e,
					
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.articlelist {
		width: 100%;
	}

	.item {
		width: 100%;
		border: solid 1px #e9e7e7;
		border-radius: $uni-border-radius-base;
		overflow: hidden;
		background: #FFFFFF;
		margin-bottom: 30rpx;
	}

	.title {
		width: 100%;
		padding: 16rpx 20rpx;
		background: #777777;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-base;
		border-bottom: solid 1px #EEEEEE;
	}

	.content {
		width: 100%;
		float: left;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.content .hd {
		width: 100%;
		color: #666666;
		font-size: $uni-font-size-xs;
		line-height: 50rpx;
		display: flex;
		flex-direction: row;
	}

	.content .hd image {
		width: 40rpx;
		height: 40rpx;
		object-fit: cover;
	}

	.content .hd text {
		margin-right: 20rpx;
	}

	.content .bd {
		width: 100%;
		font-size: $uni-font-size-sm;
		color: #555555;
		line-height: 40rpx;
		margin-top: 15rpx;
	}

	.item:hover {
		border-color: $uni-bg-color-zhu;
	}

	.item:hover .title {
		background: $uni-bg-color-zhu;
		color: $uni-text-color-inverse;
	}

	.navigator-hover {
		opacity: 1;
	}
</style>
